<template>
  <el-card>
    <el-row>
      <el-col :span="8">
        <div style="display: flex; align-items: center">
          <div style="margin: 10px">
            <el-image
              :src="formData.appIcon"
              style="
                width: 100px;
                height: 100px;
                border-radius: 10px;
                border: 2px solid #ccc;
              "
            >
              <div slot="error" class="image-slot">
                <el-image
                  :src="require('@/assets/images/anzhuo.png')"
                  style="
                    padding: 8px;
                    width: 100px;
                    height: 100px;
                    margin-left: -3px;
                  "
                />
              </div>
            </el-image>
          </div>
          <div>
            <p>
              应用名称：<span style="font-size: 16px; font-weight: bold">{{
                formData.appName
              }}</span>
            </p>
            <p>
              下载量：<span style="font-size: 16px; font-weight: bold">{{
                formData.appCountDownloads
              }}</span>
            </p>
            <p>
              应用评分：<span style="font-size: 16px; font-weight: bold">{{
                formData.appScore
              }}</span>
            </p>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 详细信息 -->
    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <el-descriptions
          title="【详细信息】"
          direction="vertical"
          :column="4"
          border
        >
          <el-descriptions-item label="应用分类">{{
            formData.appType
          }}</el-descriptions-item>
          <el-descriptions-item label="应用运营商">{{
            formData.appOperator
          }}</el-descriptions-item>
          <el-descriptions-item label="应用备案号">{{
            formData.appRecordno
          }}</el-descriptions-item>
          <el-descriptions-item label="主办者">
            {{ formData.appSponsor }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ formData.appUpdatedate }}
          </el-descriptions-item>
          <el-descriptions-item label="数据来源">
            {{ formData.sourceType == 1 ? "上传" : "导入" }}
          </el-descriptions-item>
          <el-descriptions-item label="版本号">
            {{ formData.appVersion }}
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            {{ formData.remark }}
          </el-descriptions-item>
          <el-descriptions-item label="app隐私政策" v-if="formData.appPrivacy">
            <!-- 小眼睛点击跳转到新的页面 -->
            <span
              @click="togglePrivacy(formData.appPrivacy)"
              style="color: #409eff; cursor: pointer"
            >
              查看<el-icon
                :size="20"
                color="#409eff"
                class="el-icon-view"
              ></el-icon>
            </span>
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
    <!-- 主要功能/简介 -->
    主要功能/简介
    <el-row style="margin-top: 20px">
      <el-col :span="8">
        <div v-for="(item, index) in displaySummary" :key="index">
          <p v-if="index === 0" style="font-size: 16px; font-weight: bold">
            {{ item }}
          </p>
          <p v-else>{{ item }}</p>
        </div>
        <div v-if="formData.appSummary.length > 4">
          <el-collapse v-model="activeNames">
            <el-collapse-item name="1">
              <template slot="title">
                <span style="color: #409eff; cursor: pointer">
                  {{ isExpanded ? "收起" : "展开详情" }}
                </span>
              </template>
              <div
                v-for="(item, index) in formData.appSummary.slice(4)"
                :key="index + 4"
              >
                <p>{{ item }}</p>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>
    </el-row>

    <!-- 权限信息 -->
    权限信息
    <el-row style="margin-top: 20px">
      <el-col :span="24">
        <el-table
          :data="formData.appAuthority"
          style="width: 100%"
          height="300"
          border
        >
          <el-table-column
            prop="title"
            label="权限名称"
            width="180"
          />
          <el-table-column
            prop="description"
            label="权限描述"
          />
        </el-table>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { getApkDetail } from "@/api/crossSpacesystem/application";
export default {
  name: "Detail",
  data() {
    return {
      formData: {},
      activeNames: [],
      isExpanded: false,
      isPrivacyExpanded: false,
    };
  },
  computed: {
    displaySummary() {
      return this.formData.appSummary.slice(0, 4);
    },
  },
  watch: {
    activeNames(val) {
      this.isExpanded = val.length > 0;
    },
  },
  mounted() {
    // 获取id
    const id = this.$route.query.id;
    this.getApkDetailFn(id);
  },
  methods: {
    getApkDetailFn(id) {
      getApkDetail(id).then((res) => {
        this.formData = res.data;
        console.log('res.data',res.data);
        debugger
        //通过\n分割成数组
        this.formData.appSummary = res.data.appSummary.split("\n");
        // if (res.data.appPrivacy) {
        //   this.formData.appPrivacy = JSON.parse(res.data.appPrivacy);
        // }
        if(res.data.appAuthority){
          this.formData.appAuthority = JSON.parse(res.data.appAuthority);
          console.log('this.formData.appAuthority',this.formData.appAuthority);
        }
      });
    },
    togglePrivacy(privacy) {
      window.open(privacy, "_blank");
    },
  },
};
</script>

<style scoped>
.privacy-content {
  max-height: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-height: 1.5;
  transition: max-height 0.3s ease-in-out;
}

.privacy-content.expanded {
  max-height: none;
  -webkit-line-clamp: unset;
}

.expand-btn {
  text-align: right;
  margin-top: 8px;
}
</style>
